<template>
	<view class="main">
		<view class="base_info">
			<view class="info_item_box d-flex a-center j-sb">
				<view class="info_item_title d-flex a-center">
					<text class="require_icon">
						*
					</text>
					柜体名称
				</view>
				<view class="d-flex a-center">
					<u-input border="none" v-model.trim="form.name" placeholder="请输入"></u-input>
					<image @click.stop="selecCabinet"
						src="https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/curriculum/filtrate_r.png"
						class="edit_icon"></image>
				</view>
			</view>
			<view class="info_item_box d-flex a-center j-sb">
				<view class="info_item_title d-flex a-center">
					<text class="require_icon">
						*
					</text>
					柜体宽
					<text class="unit">(m)</text>
				</view>
				<view class="d-flex a-center">
					<u-input border="none" @blur="numBlur" v-model.trim="form.num1" placeholder="请输入" type="digit"></u-input>
				</view>
			</view>
			<view class="info_item_box d-flex a-center j-sb">
				<view class="info_item_title d-flex a-center">
					<text class="require_icon">
						*
					</text>
					柜体高
					<text class="unit">(m)</text>
				</view>
				<view class="d-flex a-center">
					<u-input border="none" @blur="numBlur" v-model.trim="form.num2" placeholder="请输入" type="digit"></u-input>
				</view>
			</view>
			<view class="info_item_box d-flex a-center j-sb">
				<view class="info_item_title d-flex a-center">
					<text class="require_icon">
						*
					</text>
					柜体面积
					<text class="unit">(㎡)</text>
				</view>
				<view class="d-flex a-center">
					<u-input border="none" v-model.trim="form.area" placeholder="请输入" type="digit"></u-input>
				</view>
			</view>
			<view class="info_item_box d-flex a-center j-sb">
				<view class="info_item_title d-flex a-center">
					<text class="require_icon">
						*
					</text>
					单价
					<text class="unit">(元/㎡)</text>
				</view>
				<view class="d-flex a-center">
					<u-input border="none" v-model.trim="form.unitPrice" placeholder="请输入" type="digit"></u-input>
				</view>
			</view>
		</view>
		<view class="operation">
			<view @click="comfirm" class="btn">确 定</view>
		</view>
		<!-- 选择柜体 -->
		<u-picker @confirm="confirmCabinet" :closeOnClickOverlay="true" @cancel="showCabinet=false" :show="showCabinet"
			:columns="cabinetColumns" @close="showCabinet=false">
		</u-picker>
	</view>
</template>

<script>
	export default {
		props: {},
		components: {},
		data() {
			return {
				cabinetColumns: [
					['主卧', '次卧', '榻榻米', '鞋柜', '酒柜', '餐边柜', '阳台柜', '楼梯柜',
						'橱柜',
						'异形柜', '自定义柜'
					]
				],
				showCabinet: false,
				form: {
					num1: '',
					num2: '',
					area: '',
					unitPrice: '',
					name: '',
				},
			}
		},
		watch: {},
		onLoad(option) {
			if (option.modify) {
				this.form = JSON.parse(uni.getStorageSync('cabinetInfo'))
				uni.removeStorageSync('cabinetInfo')
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			comfirm() {
				if (!this.form.name) {
					uni.showToast({
						title: '请输入柜体名称',
						icon: 'none'
					})
					return
				}
				if (!this.form.num1) {
					uni.showToast({
						title: '请输入柜体宽',
						icon: 'none'
					})
					return
				}
				if (!this.form.num2) {
					uni.showToast({
						title: '请输入柜体高',
						icon: 'none'
					})
					return
				}
				if (!this.form.area) {
					uni.showToast({
						title: '请输入柜体面积',
						icon: 'none'
					})
					return
				}
				if (!this.form.unitPrice) {
					uni.showToast({
						title: '请输入单价',
						icon: 'none'
					})
					return
				}
				uni.setStorageSync('addInfo', JSON.stringify(this.form))
				uni.navigateBack({ delta: 1 })
			},
			confirmCabinet(arr) {
				this.form.name = arr.value[0]
				this.showCabinet = false
			},
			selecCabinet() {
				this.showCabinet = true
			},
			numBlur() {
				if (this.form.num1 && this.form.num2) {
					let area = (this.form.num1 - 0) * (this.form.num2 - 0)
					this.form.area = this.keepThreeNum(area)
				}
			},
			// 保留三位小数
			keepThreeNum(value) {
				let resValue = Math.round(value * 1000) / 1000
				return resValue
			},
		},
	}
</script>

<style scoped lang='scss'>
	/deep/input {
		width: 400rpx;
		height: 40rpx !important;
		text-align: right !important;
		font-size: 28rpx !important;
		line-height: 40rpx !important;
		color: #222 !important;
		font-weight: 500;
	}

	.main {
		min-height: 100vh;
		padding-bottom: 200rpx;
		background-color: #f5f7fa;

		.base_info {
			margin-bottom: 16rpx;
			padding: 32rpx 24rpx 32rpx 16rpx;
			box-sizing: border-box;
			background: #fff;

			.info_item_box {
				height: 88rpx;

				.info_item_title {
					font-size: 28rpx;
					color: #222;
					line-height: 36rpx;

					.require_icon {
						margin-right: 8rpx;
						font-size: 32rpx;
						font-weight: 550;
						text-align: left;
						color: #dc3545;
					}

					.unit {
						margin-left: 8rpx;
						font-size: 20rpx;
					}
				}

				.edit_icon {
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
					margin-right: 0;
				}
			}
		}
	}

	.operation {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		height: 180rpx;
		z-index: 9;

		.btn {
			color: #fff;
			line-height: 80rpx;
			background: #4087ff;
			border-radius: 40rpx;
			text-align: center;
			margin: 0rpx 32rpx;
			margin-top: 16rpx;
			font-size: 32rpx;
		}
	}
</style>